<template>
	<view class="container">
		<view class="top">
			<view class="label">选择分类</view>
			<view class="add" @click.stop="tapAdd()">+新增分类</view>
		</view>
		<template v-for="content in list" :key="content.id">
			<view class="template" @click="selCategory(content)">
				<view class="content">
					{{ content.title }}
				</view>
			</view>
		</template>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog
				ref="dialog"
				mode="input"
				v-model="title"
				:maxlength="6"
				:title="category.id ? '修改' : '新增' + '分类'"
				placeholder="请输入分类,不得超过6个字符"
				@confirm="addCategory"
			/>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Category } from '../../vendor/order_food/category';
import getCategory from '../../vendor/order_food/category';
import { setCategory } from '../../store/global';
import { state } from "../../store/shop";
const { list, add, getList, category } = getCategory();
getList();

const inputDialog = ref();
const show = ref(false); // 解决ios输入框自动获取焦点的问题
const title = ref('');

const selCategory = (c: Category) => {
	console.log(c)
	setCategory(c);
	uni.navigateBack();
};

const tapAdd = () => {
	show.value = true;
	inputDialog.value.open();
};

const addCategory = () => {
	add(title.value, (id, sort) => {
		if (id == 0) {
			toast('添加失败,请稍后重试');
			return;
		}
		const item: Category = {
			id: id,
			title: title.value,
			sort: sort
		};

		list.value.push(item);
		state.goodsList.push({
			title: item.title,
			id: id,
			sort:sort,
			goods_list:[]
		})

		title.value = '';
	});
};

const toast = (title: string) => {
	uni.showToast({
		title,
		icon: 'none'
	});
};
</script>

<style scoped lang="scss">
.top {
	padding: 10px;
	font-size: 15px;
	display: flex;
	justify-content: space-between;
	margin-bottom: $uni-spacing-row-lg;
	.add {
		color: #a5d63f;
	}
	.label {
		color: #a6a6a6;
	}
}
.container {
	// background: #f8f8f8;
	height: 100vh;
}

.template {
	font-weight: 600;
	font-size: 20px;
	background: white;
}
.content {
	line-height: 50px;
	display: flex;
	padding: 0 10px;
	justify-content: space-between;
	.op {
		font-size: 15px;
		display: flex;
		color: #4d4dff;
		.btn {
			margin-right: 10px;
		}
	}
}
</style>
